<!--
 * @Author: your name
 * @Date: 2021-09-07 19:21:48
 * @LastEditTime: 2021-09-08 09:28:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \musicapp\src\components\playList.vue
-->
<template>
  <div class="playList">
      <div class="playList-top">
          <div class="left">
            <svg class="icon"><use xlink:href="#icon-bofang"></use></svg>
            <div class="text">
                <div class="title">播放全部</div>
                <div class="num">（共{{playlist.tracks.length}}）首</div>
            </div>
          </div>
          <div class="btn">
              + 收藏（{{changeValue(playlist.subscribedCount)}}）
          </div>
      </div>
      <div class="list">
          <div class="playItem" v-for="(item,i) in playlist.tracks" :key="item">
              <div class="left">
                  <div class="index">{{i+1}}</div>
                  <div class="content">
                      <div class="title">{{item.name}}</div>
                      <div class="anthor">
                          <!-- 这里的标签没找到在哪里，就随便用歌单的标签 -->
                          <span class="tag" v-for="tag in playlist.tags" :key="tag">{{tag}}</span>
                          <span class="name">{{item.al.name}}</span>
                          
                        </div>
                  </div>
              </div>
              <div class="right">
                  <svg class="icon" @click="setPlayIndex(i)"><use xlink:href="#icon-bofang1"></use></svg>
                  <svg class="icon"><use xlink:href="#icon-gengduo"></use></svg>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
    props:['playlist'],
    setup(){
        function changeValue(num){
            let res = 0
            if(num>=100000000){
                res = num/100000000
                res = res.toFixed(2) + '亿'
            }else if(num>10000){
                res = num/10000
                res = res.toFixed(2)+'万'
            }else{
                res = num
            }
            return res;
        }
        return{
            changeValue
        }
    },
    methods:{
        ...mapMutations(['setPlayIndex'])
    }

}
</script>

<style lang="less" scoped>
.playList{
    width: 7.5rem;
    padding: 0 0.4rem;
    background-color: #fff;
    border-radius: 0.3rem 0.3rem 0 0;
    margin-top: 0.4rem;
    .playList-top{
        display: flex;
        justify-content: space-between;
        height: 1rem;
        align-items: center;
        .left{
            display: flex;
            align-items: center;
            .icon{
                width: 0.5rem;
                height: 0.5rem;
            }
            .title{
                font-size: 0.3rem;
                font-weight: 900;
            }
            .num{
                font-size: 0.24rem;
                color: #333;
            }
            .text{
                display: flex;
                align-items: center;
                margin-left: 0.2rem;
            }
        }
        .btn{
            font-size: 0.24rem;
            color: #fff;
            background-color: orangered;
            // height: 0.6rem;
            line-height: 0.6rem;
            padding: 0.1rem;
            border-radius: 0.4rem;
        }
    }
    .list{
        .playItem{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 1.2rem;
            .left{
                display: flex;
                align-items: center;
                color: #666;
                .index{
                    width: 0.3rem;
                }
                .content{
                    margin-left: 0.4rem;
                }
                .title{
                    font-size: 0.3rem;
                    font-weight: 900;
                    color: #000;
                    // margin-bottom: 0.1rem;
                }
                .tag{
                    font-size: 0.2rem;
                    color: orangered;
                    border: 1px solid orangered;
                    border-radius: 0.1rem;
                    
                }
                .name{
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .author{
                    color: #666;
                }
            }
            .right{
                display: flex;
                justify-content: space-between;
                align-items: center;
                .icon{
                    width: 0.6rem;
                    height: 0.6rem;
                    margin:0 0.2rem;
                }
            }
            
        }
    }
}
    
</style>